<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <input type="button" value="查看用户详情" @click="loadData">
  <div v-if="user">
    <h1>用户详情</h1>
    <div>
      <p>id: {{user.id}}</p>
      <p>姓名: {{user.name}}</p>
      <p>年龄: {{user.age}}</p>
      <p>邮箱: {{user.email}}</p>
    </div>
  </div>
  <h1 v-else>暂无用户信息</h1>
</div>


<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
  var vm = new Vue({
    el: '#app',
    beforeCreate:function(){
      console.group("beforeCreate")
      console.log("页面id为app的元素的内容：",document.getElementById("app").innerHTML)
      console.log("vue关联的元素 el：",this.$el)
      console.log("vue实例的数据:",this.user)
      console.groupEnd("beforeCreate")
    },
    data: {
      user: null
    },
    // created：通过日志的观察
    // 和beforeCreate的一个基本的区别，就是选项中的数据已经被设置到 vue对象中了
    // 和beforeCreate的一个相同点： 就是视图中的内容还没有被vue进行处理
    // 通过观测，明确一个点： 就是初始化的数据可以在 created 阶段来获取并设置
    created:function(){
      console.group("created")
      console.log("页面id为app的元素的内容：",document.getElementById("app").innerHTML)
      console.log("vue关联的元素 el：",this.$el)
      console.log("vue实例的数据:",this.user)
      console.groupEnd("created")
    },

    // 就根据new Vue时传入的el选项，初始化了 vue实例的$el 属性
    beforeMount:function(){
      console.group("beforeMount")
      console.log("页面id为app的元素的内容：",document.getElementById("app").innerHTML)
      console.log("vue关联的元素 el：",this.$el.outerHTML)
      console.log("vue实例的数据:",this.user)
      console.groupEnd("beforeMount")
    },

    // mounted 被执行的时候，el中所编写的模板已经被vue处理了， 并且用处理之后的内容替换了之前的内容
    mounted:function(){
      console.group("mounted")
      console.log("页面id为app的元素的内容：",document.getElementById("app").innerHTML)
      console.log("vue关联的元素 el：",this.$el.outerHTML)
      console.log("vue实例的数据:",this.user)
      console.groupEnd("mounted")
    },

    // 数据被改了，页面结构改变之前发生
    beforeUpdate:function(){
      console.group("beforeUpdate")
      console.log("页面id为app的元素的内容：",document.getElementById("app").innerHTML)
      console.log("vue关联的元素 el：",this.$el.outerHTML)
      console.log("vue实例的数据:",this.user)
      console.groupEnd("beforeUpdate")
    },
    // 是数据改变了，页面结构也跟着改变了之后，才发生的
    updated:function(){
      console.group("updated")
      console.log("页面id为app的元素的内容：",document.getElementById("app").innerHTML)
      console.log("vue关联的元素 el：",this.$el.outerHTML)
      console.log("vue实例的数据:",this.user)
      console.groupEnd("updated")
    },

    destroyed:function(){
      console.group("destroyed")
      console.log("页面id为app的元素的内容：",document.getElementById("app").innerHTML)
      console.log("vue关联的元素 el：",this.$el.outerHTML)
      console.log("vue实例的数据:",this.user)
      console.groupEnd("destroyed")
    },
    beforeDestroy:function(){
      console.group("beforeDestroy")
      console.log("页面id为app的元素的内容：",document.getElementById("app").innerHTML)
      console.log("vue关联的元素 el：",this.$el.outerHTML)
      console.log("vue实例的数据:",this.user)
      console.groupEnd("beforeDestroy")
    },

    methods: {
      loadData: function () {
        var that =this;
        var url = "http://localhost:63342/day03/data/user.json";
        axios
        .get(url)
        .then(function (res) {
          // 把响应的用户信息赋值给 user
          that.user = res.data;
          // 数据被更改之后，页面的改变是没有那么及时的，所以这里查到的 p标签的数据为 0
          console.log("数据被改变了之后，查询p标签",document.getElementsByTagName("p").length)

          // 如果确实需要在数据改变之后，获取跟数据改变之后的页面元素的话，可以在 $nextTick 中完成。
          that.$nextTick(function () {
            console.log("数据被改变了之后的nextTick中，查询p标签",document.getElementsByTagName("p").length)
          });

        })
        .catch(function (err) {
          console.log(err)
        })
      }
    }
  });
</script>
</body>
</html>
